<template>
	<view class="container">
	    <view class="name">{{details.name}}</view>
	    <image :src="details.img" mode="" class="image"></image>
	    你当前距离{{details.name}}有{{dis}}km
	    <button style="width: fit-content;" @tap="setLine" class="button">到{{details.name}}去</button>
	  </view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config"
	import {
		getMapDistance
	} from "/utils/tools.js"
	import {
		userStore
	} from "../../store/userStore.js"
	const store = userStore()


	onLoad((data) => {

		console.log(data.id)
		getDetails((data.id))
	})


	let details = ref({})
	let dis = ref()
	async function getDetails(id) {
		let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/SenicItem/" + id)
		console.log(res)
		if (res.statusCode == 200) {
			details.value = res.data

			console.log(store.currentPos)

			console.log(details.value.lon,details.value.lat)
			dis.value = getMapDistance(details.value.lat, details.value.lon, store.currentPos.latitude, store
				.currentPos.longitude)

		}
	}
	
	function setLine()
	{
		uni.navigateTo({
			url:`/pages/playWebView/playWebView?slat=${store.currentPos.latitude}&slon=${store
				.currentPos.longitude}&elat=${details.value.lat}&elon=${details.value.lon}&name=${details.value.name}`
		})
	}
</script>


<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f0f0f0; /* 容器的背景颜色 */
  }
 .name {
    font-size: 24px; /* 名称的字体大小 */
    font-weight: bold; /* 名称的字体加粗 */
    color: #333; /* 名称的字体颜色 */
    margin-bottom: 10px; /* 与下方元素的间距 */
  }
 .image {
    width: 200px; /* 图片的宽度 */
    height: 200px; /* 图片的高度 */
    border-radius: 10px; /* 图片的圆角 */
    margin-bottom: 20px; /* 与下方元素的间距 */
  }
 .button {
    padding: 10px 20px; /* 按钮的内边距 */
    background-color: purple; /* 按钮的背景颜色 */
    color: white; /* 按钮的字体颜色 */
    border: none; /* 去除按钮的边框 */
    border-radius: 5px; /* 按钮的圆角 */
    cursor: pointer; /* 鼠标悬停时的样式 */
  }
 .button:hover {
    background-color: #0056b3; /* 按钮悬停时的背景颜色 */
  }
</style>